<template>
  <container-view>
    <div class="container-wrap">
      <div class="name">用户登录</div>
      <t-form ref="formRef" :rules="FORM_RULES" :data="formData" label-align="top" :required-mark="false">
        <t-form-item label="用户名" name="username">
          <t-input v-model="formData.username" placeholder="请输入用户名" :maxcharacter="24" @enter="onSubmit">
          </t-input>
        </t-form-item>

        <t-form-item label="密码" name="password">
          <t-input v-model="formData.password" type="password" placeholder="请输入密码" @enter="onSubmit"> </t-input>
        </t-form-item>

        <t-form-item name="code" label="验证码">
          <div class="code-wrap">
            <t-input v-model="formData.captcha" placeholder="请输入验证码" @enter="onSubmit"> </t-input>
            <img :src="captchaData.image_b64s" alt="" class="code-img" @click="initCodeImage" />
            <div class="code-text" @click="initCodeImage">看不清？换一张</div>
            <div class="code-forget" @click="forgetPwd">忘记密码</div>
          </div>
        </t-form-item>

        <t-form-item>
          <t-button class="login-btn" theme="primary" @click="onSubmit">登录</t-button>
        </t-form-item>
      </t-form>
    </div>
  </container-view>
</template>

<script setup lang="ts">
import { tryit } from 'radash';
import { sm3 } from 'sm-crypto';
import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import openApi from '@/api/open';
import { SUCCESS_CODE } from '@/constants';
import { useUserStore } from '@/store';

import ContainerView from './components/Container.vue';
import { FORM_RULES, INITIAL_DATA } from './datas/index';

const formRef = ref<FormInstanceFunctions>();
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

const formData = ref({ ...INITIAL_DATA });
const captchaData = ref<any>({});

const forgetPwd = () => {
  router.push('reset');
};

const initCodeImage = async () => {
  const [err, res] = await tryit(openApi.captcha)();
  if (!err && res.code === SUCCESS_CODE) {
    const { code, data } = res;
    if (code === SUCCESS_CODE) {
      captchaData.value = data;
      formData.value.captcha_id = data.captcha_id;
    }
  }
};

const onSubmit = async () => {
  const validateRes = await formRef.value.validate();

  if (validateRes === true) {
    // eslint-disable-next-line camelcase
    const { captcha, password, username, captcha_id } = formData.value;
    // eslint-disable-next-line camelcase
    const data = { captcha, captcha_id, password: sm3(password), username };
    await userStore.login(data);

    await MessagePlugin.success('登陆成功');
    const redirect = route.query.redirect as string;
    const redirectUrl = redirect ? decodeURIComponent(redirect) : '/dashboard';
    await router.push(redirectUrl);
  }
};

// 开发模式自动赋值
const initData = () => {
  const mode = import.meta.env.MODE;

  if (mode === 'development') {
    formData.value.username = 'root';
    formData.value.password = 'Chivalrous@24';
  }
};

onMounted(() => {
  initData();
  initCodeImage();
});
</script>

<style lang="less" scoped></style>
